const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const PurifyCss = require('purifycss-webpack')
const glob = require('glob-all')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {
  mode: 'production', // production , development
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ExtractTextWebpackPlugin.extract({
          fallback: {
            loader: 'style-loader',
            options: {singleton: true}
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                // minimize: true,
                // modules: true, // 启用css-modules
                localIdentName: '[path][name]_[local]--[hash:bases64:5]'
              }
            },
            {
              loader: 'less-loader'
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextWebpackPlugin({
      filename: '[name].min.css',
      allChunks: false
    }),
    // 剔除没有用到多余的css样式， css tree shaking
    new PurifyCss({
      // 这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
      paths: glob.sync([
        path.join(__dirname, './*.html'),
        path.join(__dirname, './src/*.js')
      ]),
      // paths: glob.sync(path.join(__dirname, './*.html'))
    }),
    // js tree shaking, 测试UglifyJsPlugin后没有效果， mode production压缩js才有效果
    // new UglifyJsPlugin(), // webpack 4.x后 可以使用 --mode production 进行压缩
    //  webpack.optimize.UglifyJsPlugin has been removed
    // new webpack.optimize.UglifyJsPlugin({
    //   minimize: false
    // })
  ],

  optimization: {
    minimize: true
  }
}